<template>
  <div class="home">
    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="全部" name="first"></el-tab-pane>
      <el-tab-pane label="热门" name="second"></el-tab-pane>
      <el-tab-pane label="最新" name="third"></el-tab-pane>
      <el-tab-pane label="豆瓣高评" name="fourth"></el-tab-pane>
    </el-tabs>
    <div class="listWrap">
      <dl v-for='(v,i) in list' :key="i" @click="todetail(v.movieid)">
      <dt><img :src="v.img" alt=""></dt>
      <dd>
        <h3>{{v.name}}</h3>
        <p><i>{{v.fen}}分</i></p>
      </dd>
    </dl>
    </div>
    <el-pagination
    layout="prev, pager, next"
    @current-change="handleCurrentChange"
    :total="total">
  </el-pagination>
  </div>
  
</template>

<script>
import { getUrl } from "../utils/request";
export default {
  data() {
    return {
      list: [],
      total: 0,
      type: "",
      activeName:'first'
    };
  },
  methods: {
    handleClick(tab) {
        this.type=tab.label
        this.getList()
    },
    async getList(pageIndex = 0, pageSize = 10) {
      const res = await getUrl("/getlist", {
        pageIndex,
        pageSize,
        type: this.type,
      });
      console.log(res)
      this.list=res.data.data
      this.total=res.data.total
    },
    handleCurrentChange(index){
      this.getList(index)
    },
    todetail(m_id){
      this.$router.push('/about/')
      localStorage.setItem("m_id",m_id)
    }
  },
  created() {
    this.getList();
  },
};
</script>
<style lang="scss">
  .home{
    width: 800px;
    height: 100%;
    margin: 0 auto;
    .el-tabs{
      width: 100%;
    }
    .listWrap{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      dl{
      width: 20%;
      padding:10px
      dt{
        width: 100%;
      }
      img{
        width: 100%;
        height: 200px;
      }
    }
    }
    
  }
</style>